<template>
  <view class="main-box">
    <z-paging ref="paging" v-model="data.bankBranchList" @query="getBanKBranchList" refresher-enabled>
      <van-sticky>
        <view class="w-full flex items-center bg-white">
          <view class="w-80%">
            <van-search
              @search="onSearch"
              @change="
                (e: any) => {
                  data.branchName = e.detail;
                }
              "
              :value="data.branchName"
              placeholder="请输入搜索关键词"
            >
            </van-search>
          </view>
          <view class="w-20%">
            <van-button type="primary" @click="onSearch" size="small">搜索</van-button>
          </view>
        </view>
      </van-sticky>
      <view class="c-pd">
        <van-cell-group>
          <van-cell :border="false" clickable :title="item.branchName" @click="returnBranchCode(item)" :label="item.bankCode" v-for="(item, index) in data.bankBranchList" :key="index" />
        </van-cell-group>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import UserRequest from '@/request/userRequest';
import { navigate } from '@/utils/navigate';

interface IData {
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  bankBranchList: IBankBranchList[];
  branchName: string;
  bankCode: string;
}

const data = reactive<IData>({
  pages: {
    pageNo: 1,
    pageSize: 20,
    totalPage: 1,
  },
  bankBranchList: [],
  branchName: '',
  bankCode: '',
});

const paging = ref();

onLoad((options) => {
  if (!options) return;
  data.bankCode = options.bankCode;
});

const getBanKBranchList = (pageNo: number, pageSize: number) => {
  UserRequest.GetCurrentBankBranchList({ pageNo, pageSize, bankCode: data.bankCode, branchName: data.branchName, hasLoading: true })
    .then((res) => {
      paging.value.complete(res.data.list);
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};

const onSearch = () => {
  paging.value.reload();
};

const returnBranchCode = (item: IBankBranchList) => {
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  prevPage.$vm.branchName = item.branchName;
  prevPage.$vm.branchCode = item.branchCode;
  navigate({ url: '', type: 'navigateBack' });
};
</script>

<style lang="scss" scoped>
.main-box {
  .c-pd {
    :deep(.van-cell) {
      margin-bottom: 24rpx;
      border-radius: 16rpx;
    }
  }
}
</style>
